<template>
    <div class="layout">
        <div class="left_box">
            <el-form
                ref="formRef"
                label-width="96px"
                :model="formData"
                :rules="formRules"
                :disabled="props.pageType == 'look'">
                <el-form-item label="选择公众号" prop="official_account_id">
                    <!-- <div v-if="formData.official_account_id == ''" class="official_box" @click="() => TPDialogRef.getList(publicInfo.id)">
            <el-icon><circle-plus-filled /></el-icon>
            <div class="official_text">选择公众号</div>
          </div>
          <div v-else class="official_box2" @click="() => TPDialogRef.getList(publicInfo.id)">
            <div class="left">
              <el-image style="width: 60px; height: 60px" :src="publicInfo.url" fit="cover">
                <template #error>
                  <div>
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="right">
              <h3 class="right_h3">{{ publicInfo.name }}</h3>
              <div class="right_btn">
                <el-tag size="small">服务号</el-tag>
              </div>
            </div>
          </div> -->
                    <OfficialAccounts
                        :public-data="{ id: formData.official_account_id, pageType }"
                        @submit="v => v && (formData.official_account_id = v)" />
                </el-form-item>

                <el-form-item label="活动标题" prop="activity_name" class="max_input">
                    <el-input
                        v-model="formData.activity_name"
                        placeholder="请输入标题名称"
                        maxlength="15"
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="活动分组" prop="group_id" class="max_input">
                    <el-cascader
                        ref="cascaderRef"
                        v-model="formData.group_id"
                        style="width: 100%"
                        :props="defaultProps"
                        :options="groupOptions"
                        @change="orgChange" />
                </el-form-item>
                <el-form-item label="活动有效期">
                    <el-radio-group v-model="formData.period_type">
                        <el-radio :label="1">永久</el-radio>
                        <el-radio :label="2">固定期限</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="formData.period_type == 2" prop="effect_date">
                    <el-date-picker
                        v-model="formData.effect_date"
                        type="datetimerange"
                        :default-time="defaultTime()"
                        :disabled-date="time => time.getTime() < Date.now() - 8.64e7"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        range-separator="~"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="onTimes">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动说明" class="max_input">
                    <el-input
                        v-model="formData.description"
                        placeholder="请输入活动说明"
                        maxlength="150"
                        show-word-limit
                        :rows="6"
                        type="textarea" />
                </el-form-item>
            </el-form>
        </div>
    </div>

    <TPDialog ref="TPDialogRef" @submit="onInfo"></TPDialog>
</template>

<script setup lang="ts">
import { ref, defineExpose, defineProps, watch, onMounted } from 'vue';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { getGroupList } from '@/api/concreation';
import TPDialog from '@/components/TPDialog.vue';
import { timeValidator } from '@/utils/smartMarketing';
import OfficialAccounts from '@/components/OfficialAccounts.vue';
import { getOfficeAccountList } from '@/api/channelconfig/officeAccount';
import { useRoute } from 'vue-router';
import { defaultTime } from '@/utils/utils';

const emit = defineEmits(['submit']);
const route = useRoute();
const TPDialogRef: any = ref(null);
const cascaderRef: any = ref(null); // 选择分组ref
const formRef: any = ref(null);
const props = defineProps<{
    pageType: {
        type: string;
    };
    group_id: {
        type: string | number;
    };
}>();
const visible = ref(false);
const formData = ref({
    official_account_id: '', //公众号授权的ID
    activity_name: '', //活动名称
    group_id: props.group_id == 'all' ? 0 : props.group_id, //分组ID // 活动分组
    period_type: 1, //活动有效期类型: 1-永久 2-固定期限
    end_date: '', //结束时间
    begin_date: '', //开始时间
    description: '', //活动说明
    effect_date: []
});

const formRules = {
    official_account_id: [{ required: true, message: '请选择公众号', trigger: 'change' }],
    activity_name: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
    group_id: [{ required: true, message: '请选择活动分组', trigger: 'change' }],
    period_type: [{ required: true, message: '请选择活动有效期类型', trigger: 'change' }],
    effect_date: [
        { required: true, message: '请选择活动有效期', trigger: 'blur' },
        { validator: timeValidator, trigger: 'blur' }
    ]
};

const publicInfo = ref({
    id: '',
    name: '',
    url: ''
});
const onInfo = (val: any) => {
    formData.value.official_account_id = val.id;
    publicInfo.value = val;
};
const onGetOffice = async () => {
    const res = await getOfficeAccountList({ page: 1, page_size: 100 });
    if (res.data.length == 1) {
        formData.value.official_account_id = res.data[0].id;
        publicInfo.value.id = res.data[0].id;
        publicInfo.value.type = res.data[0].verify_type_info;
        publicInfo.value.name = res.data[0].nick_name;
        publicInfo.value.url = res.data[0].head_img;
    }
};
const timeStr = ref('');
const onTimes = (val: any) => {
    formData.value.begin_date = val[0];
    formData.value.end_date = val[1];
};

const groupOptions = ref([]);
const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
};
const onGroupgList = async () => {
    const res = await getGroupList({ type: 17, name: '' });
    groupOptions.value = res.data;
};
// 选择完地区后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};
onGroupgList();
onMounted(() => {
    !props.pageType && onGetOffice();
});
watch(
    formData,
    val => {
        emit('submit', val);
    },
    { deep: true }
);
defineExpose({
    formData,
    formRef,
    publicInfo
});
</script>

<style lang="scss" scoped>
.layout {
    display: flex;
    background-color: #fff;
    padding-left: 4px;
    padding-top: 4px;

    .left_box {
        flex: auto;

        .official_box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 300px;
            height: 150px;
            border: 1px solid #eaeaea;
            border-radius: 1px;
            cursor: pointer;
            color: #ccc;
            font-size: 45px;

            .official_text {
                font-size: 14px;
                color: #000000d1;
            }
        }

        .official_box2 {
            display: flex;
            cursor: pointer;

            &:hover {
                background: #f5f5f5;
            }

            .left {
                margin-right: 10px;

                .el-icon {
                    font-size: 60px;
                }
            }

            .right {
                color: #ff5b11;
                text-align-last: left;

                .right_h3 {
                    font-weight: 700;
                }
            }
        }
    }
}

.max_input {
    max-width: 676px;
}
</style>
